<template>
    <view class="pay">
        <view class="address-btn">
            <button class="btn" @click="haerClick" v-if="!address">选择地址</button>
        <!-- 地址信息 -->
        <view class="address" v-else>
            <!-- 地址 -->
            <view class="detail-address">{{detailAddress}}</view>
            <!-- usernsme -->
            <view class="detail-info">
                <!-- 地址名称、电话 -->
                <view class="username">{{address.userName}}</view>
                <view class="bernum">{{address.telNumber}}</view>
            </view>
        </view>
        </view>

        <!-- 购买商品列表 -->
        <view class="yixuan">已选商品</view>
        <view class="goodslist u-flex" v-for="item in cartList" :key="item.goods_id">
            <!-- 图片 -->
        <view>
            <image class="image" :src="item.goods_small_logo"></image>
        </view>
        <!-- 右边 -->
        <view class="goods-left">
            <!-- 商品名称 -->
            <view>{{item.goods_name}}</view>
            <view class="goods-picet">
                <!-- 商品价格 -->
                <view class="goods-picet-p">￥{{item.goods_price}}</view>
                <!-- 商品数量 -->
                <view class="goods-num">x{{item.count}}</view>
            </view>
        </view>
    </view>

    <!-- 底部-->
    <view class="flooer">
        <view class="center">合计：<text>￥ {{allPrice}}</text></view>
        <view class="right">
            <u-button type="error"  shape="circle" size="mini" @click="goPay">去支付({{allCount}})</u-button>
        </view>
    </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            // 用户信息
            address:null,
        }
    },
    computed:{
        detailAddress (){
            // 地址
            if(!this.address) return null
            const { provinceName, cityName, countyName, detailInfo } = this.address;
            return provinceName + cityName + countyName + detailInfo
        },
        // 选中商品列表  filter过滤  如果有checked才添加进支付
        cartList(){
            return this.$store.state.cartList.filter((goods) => goods.checked)
        },
        // 总数量
        allCount(){
            return this.$store.getters.count
        },
        // 总价格
        allPrice(){
            return this.$store.getters.allPrice
        }
    },
    methods:{
        async haerClick(){
            // 获取用户地址
            const [err, res] = await uni.chooseAddress()
            // 绑定用户信息
            this.address=res
            // console.log(res);
        },
        // 去支付
        async goPay(){
            if(!this.address){
                uni.showToast({
                title:'您还没有要选的地址',
                icon:'none'
            })
            return
            }
            // 判断又没token 没有就跳转授权页面  uni.getUserProfile()
            const [err1, {encryptedData,rawData,iv,signature}] = await uni.getUserProfile({desc: '用于完善会员资料'})
            //获取 code
            const [err2, {code}] = await uni.login()

            // 获取token
            const res = await this.$u.post('/users/wxlogin', {encryptedData,rawData,iv,signature,code})
            const { token } = res.message;

            // 请求创建订单号需要的参数  orderParams  order_price
            const orderParams = {
                // 总价格
                order_price: this.allPrice,
                // 地址
                consignee_addr: this.detailAddress,
                // 订单数组
                goods: this.cartList.map((goods) =>({
                    // 商品id
                    goods_id: goods.goods_id,
                    // 商品数量
                    goods_number: goods.count,
                    // 商品单价
                    goods_price: goods.goods_price
                }))
            };

            // 创建订单号
            const res2 = await this.$u.post('/my/orders/create', orderParams, {Authorization: token})

            // 获取支付参数  pay  预付订单
            const res3 = await this.$u.post('/my/orders/req_unifiedorder', {order_number: res2.message.order_number}, {Authorization: token})
            const { pay } = res3.message

            // 微信小程序 支付
            uni.requestPayment(pay)
    }
}
}
</script>

<style lang="scss">
.pay{
    background-color: #f9f9f9;

    .address-btn{

    }
}
.address{
    background-color: #fff;
    margin: 15rpx;
    padding: 15rpx;

    .detail-address{
        font-weight: 700;
    }

    .detail-info{
        display: flex;
        margin: 20rpx 0;
        .bernum{
            padding-left: 20rpx;
        }
    }
}

.yixuan{
    margin: 0 15rpx;
    margin-top: 20rpx;
    padding-left: 30rpx;
    background-color: #fff;
    font-size: 28rpx;
    font-weight: 700;
}

// 中间内容
.goodslist{
    background-color: #fff;
    height: 209rpx;
    margin: 0 15rpx;
    margin-bottom: 83rpx;
    border-bottom: 1px solid #ccc;
    image{
        width: 191rpx;
        height: 191rpx;
    }
    .goods-left{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    padding: 10rpx;
    height: 100%;
    .goods-picet{
        display: flex;
        justify-content: space-between;
        .goods-picet-p{
            color: $themeColor;
        }
        .goods-num{
        .cunot{
            width: 50rpx;
            height: 50rpx;
            border: 1px solid #ccc;
            border-radius: 50%;
            text-align: center;
        }
    }
    }
    }
}
// 底部
.flooer{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 83rpx;
    border-top: 1px solid rgba(204, 204, 204, 0.514);
    background-color: #fdfdfd;
    position: fixed;
    padding: 0 20rpx;
    width: 100%;
    height: 83rpx;
    line-height: 83rpx;
    bottom: 0;
    left: 0;
    .center{

        text{
            color: $themeColor;
            font-size: 30rpx;
        }
    }
}
</style>

